import QtQuick 2.0
import QtQuick.Controls 2.0
import Qt.labs.platform 1.1
import QtQuick.Layouts 1.3
import ImageProvide 1.0
import ImageWrapper 1.0


Rectangle {
    id: root
    radius: 10
    clip: true
    color: "red"
    visible: true
    readonly property string source_display: ":/iu.png"
    readonly property string source_fit_hover: "qrc:/fit.png"
    readonly property string source_fit_normal: "qrc:/fit.png"
    readonly property string source_fit_pressed: "qrc:/fit.png"
    property var ratio;

    Component.onCompleted: {
        loadData()
    }

    function loadData() {
        faceImage.initImage(root.source_display);
        adaptImage();
        faceImage.update();
    }

    function adaptImage() {
        faceImage.width = faceImage.imageWidth()
        faceImage.height = faceImage.imageHeight()
        //console.log("width: ", faceImage.width, "height: ", faceImage.height)
        var newWidth,newHeight;
        var horizontalRatio = (faceImage.width * 1.0 / root.width);
        var verticalRatio = faceImage.height * 1.0 / root.height;
        var markMoveDistanX, markMoveDistanY;


        if(horizontalRatio > verticalRatio)
        {
            newWidth = root.width - 20;
            root.ratio = faceImage.width * 1.0 / newWidth;
            newHeight = faceImage.height * 1.0 / root.ratio
            updateMarkPoint();
            markMoveDistanX = 10 - faceImage.imagePosition().x
            markMoveDistanY = (root.height - newHeight)/2 - faceImage.imagePosition().y
            setImage(1.0 / root.ratio)
            faceImage.movePosition(10, (root.height - newHeight)/2)
        }
        else
        {
            newHeight = root.height - 10*2;
            root.ratio = faceImage.height * 1.0 / newHeight;
            newWidth = faceImage.width * 1.0 / root.ratio
            markMoveDistanX = (root.width - newWidth)/2 - faceImage.imagePosition().x
            markMoveDistanY = 10 - faceImage.imagePosition().y
            setImage(1.0 / root.ratio)
            faceImage.movePosition((root.width - newWidth)/2, 10)
        }
    }

    function setImage(scaleValue) {
        var curScale = faceImage.scale
        faceImage.scale = scaleValue
        var scaleFactor = scaleValue / curScale

        if(faceImage.bEnterScaleArea) {
            faceImage.setCurPosition( scaleFactor, curScale * faceImage.inItemPosX, curScale * faceImage.inItemPosY)
        }
        else {
            faceImage.setCurOutPosition( scaleFactor, faceImage.outItemPosX - faceImage.x, faceImage.outItemPosY - faceImage.y)
        }
    }

    function setScalePoint(x, y) {
        faceImage.inItemPosX = x
        faceImage.inItemPosY = y
    }

    function leftFaceDegrees() {
        faceImage.leftRotation()
        adaptImage();
    }

    function rightFaceDegrees() {
        faceImage.rightRotation()
        adaptImage();
    }

    function leftRightFaceMirror(mirrored) {
        faceImage.leftRightMirrored()
        adaptImage();
    }

    function upDownFaceMirror(mirrored) {
        faceImage.upDownMirrored()  
        adaptImage();
    }

    MouseArea {
        id: msArea
        anchors.fill: root
        hoverEnabled: true
        acceptedButtons: Qt.MiddleButton | Qt.LeftButton
        property point dragPt
        property point originPt
        property var listMarkPt: []
        property point faceImagePt

        onWheel: {
            var datla = wheel.angleDelta.y / 120
            if (datla > 0) {
                setImage(faceImage.scale / 0.95)
            }
            else {
                setImage(faceImage.scale * 0.95)
            }
        }

        onPressed: {
            dragPt.x = mouseX
            dragPt.y = mouseY
            faceImagePt.x = faceImage.imagePosition().x
            faceImagePt.y = faceImage.imagePosition().y
            faceImage.isDrag = true
            timer.start()
        }

        onEntered: adaptRect.visible = true
        onExited: adaptRect.visible = false

        onReleased: {
            faceImage.isDrag = false
        }

        onPositionChanged: {
            if(pressed)
            {
                faceImage.movePosition(faceImagePt.x + mouseX - dragPt.x, faceImagePt.y + mouseY - dragPt.y)
            }
            faceImage.outItemPosX = mouseX
            faceImage.outItemPosY = mouseY
        }
    }

    ImageProvide {
        id: faceImage
        smooth:false
        scale:1.0
        transformOrigin: Item.TopLeft
        property bool bEnterScaleArea: false
        // 在face图片内的坐标
        property real inItemPosX: 0
        property real inItemPosY: 0
        // 在face图片外的坐标
        property real outItemPosX: 0
        property real outItemPosY: 0
        // 判断是否是拖动时间
        property bool isDrag: false
        // 保存按下的坐标
        property real pressItemX: 0
        property real pressItemY: 0

        property alias mirrorAlias: mirror

        transform: Scale {
            id: mirror
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents: true
            acceptedButtons: Qt.MiddleButton | Qt.LeftButton

            onExited: {
                faceImage.bEnterScaleArea = false
            }

            onEntered: {
                faceImage.bEnterScaleArea = true
                adaptRect.visible = true
            }

            onPressed: {
                faceImage.pressItemX = mouseX
                faceImage.pressItemY = mouseY
                mouse.accepted = false
            }

            onPositionChanged: {
                setScalePoint(mouseX, mouseY)
                mouse.accepted = false
            }
        }

        Timer {
            id: timer
            interval: 250
            repeat: false
            running: false
            onTriggered: {
                stop()
                faceImage.isDrag = false
            }
        }
    }

    Rectangle {
        id: adaptRect
        color: "transparent"
        implicitHeight: 30
        implicitWidth: 30
        radius: 4
        anchors.right: parent.right
        anchors.rightMargin: 10
        anchors.top: parent.top
        anchors.topMargin: 10
        visible: false

        Image {
            id: btnImage
            anchors.fill: parent
            source:source_fit_normal
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onClicked: { root.adaptImage(); faceImage.update(); }
            onPressed: { btnImage.source = source_fit_pressed; }
            onEntered: { btnImage.source = source_fit_hover; adaptRect.visible = true; }
            onExited: { btnImage.source = source_fit_normal;}
            onPositionChanged: {
                if(mouseX < 0 || mouseY < 0 || mouseX > root.width || mouseY > root.height)
                {
                    adaptRect.visible = false
                }
            }
        }
    }

}
